<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏豫强的作业</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    p {
        display: block;
        position: absolute;
        width: 50px;
        height: 80px;
        background: #666;
        text-align: center;
        line-height: 80px;
        top: 50px;
        opacity: 0.5;
        cursor: pointer;
    }

    b {
        display: block;
        position: absolute;
        width: 50px;
        height: 80px;
        background: #666;
        text-align: center;
        line-height: 80px;
        top: 50px;
        left: 260px;
        opacity: 0.5;
        cursor: pointer;
    }
    ul{ position: absolute;
        top: 260px;
        left: 45px;}
    li{ cursor: pointer;
        background: #666;
        width: 20px;
        height: 20px;
        list-style: none;
        margin: 3px; float: left;}
        li:first-child{background:white;}
</style>

<body>
    <p onclick="fn()">《</p><b onclick="fnn()">》</b>
    <img src="./images/1.jpg" width="300" height="300" alt="">
    <ul id="ul1">
    </ul>
</body>
<script>
    var arr = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg", "./images/4.jpg", "./images/5.jpg",
        "./images/6.jpg",
    ]
    var str=""
    for(i in arr){
        str+='<li></li>'
    }
    $('#ul1').html(str)
    setInterval("fun()", 1000)
    var n = 1
    // 上一个
    function fn() {
        n = arr.indexOf($('img').attr('src'))
        n--
        n == -1 ? (n = 5, zt(n)) : zt(n)
    }
    $('li').click(function () {
        n = $(this).index()
        zt(n)
    })
    // 下一个
    function fnn() {
        n = arr.indexOf($('img').attr('src'))
        n++
        n == 6 ? (n = -1, n++, zt(n)) : zt(n)
    }
    // 自动
    function fun() {
        n > 5 ? n = 0 :zt(n);
        zt(n)
        n++;
    }
    // 封装函数
    function zt(n) {
        $('img').attr("src", arr[n])
        $(`li:not(${n})`).css('background', '#666')
        $('li').eq(n).css('background', 'white')
    }
</script>

</html>